<template>
  <div class="pageCom_swiper">
    <div class="pageCom_swiper1">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="total,prev, pager, next, jumper"
        :total="total"
        :current-page.sync="currentPage1"
        :page-size="pageSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: ["total", "pageSize"],
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.$parent.pageSize = val;
      this.$parent.getData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.$parent.page = val;
      this.$parent.getData();
    }
  },
  data() {
    return {
      currentPage1: 1
    };
  }
};
</script>

<style lang="less" scoped>
.pageCom_swiper {
  height: 55px;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  .pageCom_swiper1 {
    .el-pagination.is-background {
      /deep/.btn-prev,
      /deep/.btn-next {
        background: #ffffff !important;
        border: 1px solid #b5b5b5;
      }
      /deep/.el-pager {
        li {
          border: 1px solid #b5b5b5;
          background: #ffffff !important;
        }
        li.active {
          background: #409eff !important;
          border: 1px solid #409eff;
        }
      }
      /deep/.el-input__inner {
        border: 1px solid #b5b5b5;
      }
      /deep/.el-input__inner.active {
        border: 1px solid #409eff !important;
      }
      /deep/.el-pagination__total {
        display: none;
      }
    }
  }
}
</style>  